<template>
  <div class="u-p-20">
    <el-card shadow="never">
      <div slot="header">
        <b class="u-f-16">
          <span v-if="objForm.id">编辑</span>
          <span v-else>添加</span>公益支出
        </b>
        <div class="u-right u-5mt">
          <el-button
            type="success"
            size="small"
            icon="el-icon-document-checked"
            @click="submitForm('objForm')"
            v-if="hasPerm('benefitEditPost')"
          >提交保存</el-button>
          <el-button size="small" icon="el-icon-back" @click="$router.go(-1)">返回</el-button>
        </div>
      </div>
      <el-form :model="objForm" :rules="rules" ref="objForm" label-width="100px" class="u-form">
        <el-tabs v-model="activeName">
          <el-tab-pane label="基本信息" name="basic">
            <el-form-item label="公益标题">
              <el-input
                v-model="objForm.title"
                placeholder="请输入公益标题"
                maxlength="50"
                show-word-limit
              ></el-input>
            </el-form-item>
            <el-form-item label="支出时间">
              <el-date-picker v-model="objForm.pay_time" type="date" value-format="yyyy-MM-dd" placeholder="选择支出时间"></el-date-picker>
            </el-form-item>

            <el-form-item label="支出类型">
              <el-input v-model="objForm.pay_type" placeholder="请输入支出类型(多类型、隔开)" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="支出资金">
              <el-input v-model="objForm.pay_capital" placeholder="请输入支出资金" show-word-limit></el-input>
            </el-form-item>
           <el-form-item label="备注说明">
                            <el-input v-model="objForm.remark" type="textarea" placeholder="备注说明" maxlength="255"
                                show-word-limit></el-input>
                        </el-form-item>
            <el-form-item label="点赞数">
              <el-input-number v-model="objForm.up_count" :min="0" label="点赞数"></el-input-number>
            </el-form-item>
             <el-form-item label="排序">
              <el-input-number v-model="objForm.sort" :min="0" label="数值越大权重越高"></el-input-number>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="支出相册" name="intro">
            <el-form-item label="相册图片" prop="photo">
              <upload-drag
                file-folder="photo"
                :file-arr="fileList1"
                :multiple="true"
                list-type="picture-card"
                :limit="10"
                accept="image/jpeg, image/png"
                tips="只能上传jpg/png文件，且不超过4MB"
                @getUploadFiles="photo"
              ></upload-drag>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="支出详情" name="details">
            <el-form-item label="支出详情" prop="detail">
              <upload-drag
                file-folder="detail"
                :file-arr="fileList2"
                :multiple="true"
                list-type="picture-card"
                :limit="31"
                accept="image/jpeg, image/png"
                tips="只能上传jpg/png文件，且不超过4MB"
                @getUploadFiles="detail"
              ></upload-drag>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import commonEdit from "@/mixins/common-edit";
import UploadDrag from "@/components/uploaddrag/uploaddrag";
export default {
  components: {
    UploadDrag
  },
  mixins: [commonEdit],
  data() {
    return {
      activeName: "basic",
      apiName: "benefit",
      backRoute: "benefitIndex", //成功跳转地址
      fileList1: [], //临时相册
      fileList2: [], //详情
      objForm: {
        id: "",
        title: "", //标题
        photo: "", //相册
        detail: "", //公益支出详情
        pay_time: "", //支出时间
        pay_type: "", //支出类型
        pay_capital: "", //支出资金
        remark:"",
        up_count:0,
        sort: 0
      }
    };
  },
  methods: {
    photo(files) {
      //相册上传回调
      this.fileList1 = files;
      this.objForm.photo = "";
      for (var i = 0; i < files.length; i++) {
        this.objForm.photo +=
          this.objForm.photo == "" ? files[i].url : "," + files[i].url;
      }
    },
    detail(files) {
      //详情上传回调
      this.fileList2 = files;
      this.objForm.detail = "";
      for (var i = 0; i < files.length; i++) {
        this.objForm.detail +=
          this.objForm.detail == "" ? files[i].url : "," + files[i].url;
      }
    },
    afterGetInfo() {
      this.objForm.photo = this.objForm.photo
        ? this.objForm.photo.split(",")
        : [];
      for (var i = 0; i < this.objForm.photo.length; i++) {
        this.fileList1.push({
          url: this.objForm.photo[i]
        }); //相册
      }

      this.objForm.detail = this.objForm.detail
        ? this.objForm.detail.split(",")
        : [];
      for (var j = 0; j < this.objForm.detail.length; j++) {
        this.fileList2.push({
          url: this.objForm.detail[j]
        }); //详情
      }
    }
  },
  created() {
    if (this.$route.params.id) {
      this.objForm.id = this.$route.params.id;
    }
  }
};
</script>
